<template>
	<view class="app-down flex-r jsb" :class="{'bottom': bottom}" v-if="isShow">
		<view class="left-text">
			<text>掌握赛事一手资讯，倾听大咖独到见解！\n</text>
			<text class="yellow">点击右方下载APP，</text><text>可看到更多作者每日公推文章，以及信心场次的私房菜推荐！</text>
		</view>
		<view class="right-img" @tap="close">
			<image class="inheritwh" src="@/public/images/public/sc.png" mode="aspectFit"></image>
		</view>
		<view class="btn-box flex-r">
			<button :plain="true" size="mini" @tap="click">立即下载</button>
		</view>
	</view>
</template>

<script>
	/**
	 * AppDown 应用下载
	 * @description 在tabbar页面底部提示用户下载APP
	 * @property {Boolean} bottom = [true|false] 是否与底部存在距离
	 * @property {Boolean} show = [true|false] 是否显示
	 */
	export default {
		name: "AppDown",
		props: {
			bottom: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				isShow: false
			};
		},
		mounted() {
			this.isShow = this.show
		},
		methods: {
			//点击事件
			click() {
				//跳转下载页面
				let random = this.$CHS.randomString(10) + Date.now()
				this.$goByName('downapp', {random})
			},
			//关闭提示
			close() {
				this.isShow = false
				this.$emit('close', true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-down{
		margin: $pc-margin;
		max-width: $max-width;
		align-items: flex-start;
		background-color: rgba(0, 34, 102, 0.8);
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--safe-area-inset-bottom);
		width: 750rpx;
		height: 200rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		z-index: 5;
		&.bottom{
			bottom: calc(var(--safe-area-inset-bottom) + #{$tabbar-height});
		}
		.left-text{
			width: 635rpx;
			margin-left: 30rpx;
			text{
				font-size: 28rpx;
				line-height: 45rpx;
				color: #FFFFFF;
				font-family: Source Han Sans CN;
			}
			.yellow{
				font-size: 30rpx;
				font-weight: 900;
				color: #FFED6A;
				display: inline;
			}
		}
		.right-img{
			margin-right: 30rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.btn-box{
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
			button{
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: none;
				border-radius: 30rpx;
				background-color: #FFED6A;
				font-size: 26rpx;
				font-weight: bold;
				color: #0055FF;
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
		}
		
	}
</style>
